<template>
  <div class="newsBulletin">
    <mains :title="'消息公告'">
      <template #btn>
        <Button type="primary" ghost class="del">删除</Button>
        <Button type="primary" @click="goAddAdmin">新增消息</Button>
      </template>
      <template #content>
        <Card>
          <!-- 搜索区域 -->
          <div class="search-box">
            <Input v-model="txt" placeholder="请输入标题" style="width: 300px" class="inp" />
            <Button type="primary">搜索</Button>
          </div>
          <!-- 表格 -->
          <tables ref="selection" :columns="columns" :data="data"></tables>
          <!-- 分页 -->
           <pages :total="total" :page-size="10" />
        </Card>
      </template>
    </mains>
  </div>
</template>

<script setup>
import mains from '@/components/main.vue'
import pages from '@/components/pageNation.vue'
import tables from '@/components/systemTable.vue'
import { ref } from 'vue'
import { useRouter } from 'vue-router';
const router = useRouter();

const txt = ref('');
const columns = ref([
  {
    type: 'selection',
    width: 60,
    align: 'center',
  },
  {
    title: '通知标题',
    key: 'title',
    align: 'center'
  },
  {
    title: '内容',
    slot: 'con',
    width: 460,
    align: 'center'
  },
  {
    title: '上传者',
    key: 'author',
    align: 'center'
  },
  {
    title:'上传时间',
    key: 'time',
    align: 'center'
  },
  {
    title: '操作',
    slot: 'action',
    width: 150,
    align: 'center'
  }
])
const data = ref([
  {
    title: '停诊通知',
    content:'心脏内科门诊已经停诊，请已挂号的用户前往个人中心的挂号记录中',
    author:'王敏',
    time:'2020/09/08 10:20'
  },
  {
    title: '停诊通知',
    content:'心脏内科门诊已经停诊，请已挂号的用户前往个人中心的挂号记录中',
    author:'王敏',
    time:'2020/09/08 10:20'
  },
  {
    title: '停诊通知',
    content:'心脏内科门诊已经停诊，请已挂号的用户前往个人中心的挂号记录中',
    author:'王敏',
    time:'2020/09/08 10:20'
  },
  {
    title: '停诊通知',
    content:'心脏内科门诊已经停诊，请已挂号的用户前往个人中心的挂号记录中',
    author:'王敏',
    time:'2020/09/08 10:20'
  }
])

// 分页
const total = ref(100); // 总条数

const goAddAdmin = ()=>{
  router.push('/home/addNews')
}
</script>

<style scoped>
.newsBulletin{
  .del{
    margin-right: 10px;
  }
  .search-box{
    .inp{
      margin-right: 10px;
    }
  }
}
</style>